<template>
  <div class="container">
    <div class="topTips">
      <span class="left"> 用户中心&gt;注销列表&gt;详情页面 </span>
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </div>
    <div class="frist">
      <div class="title">注册资料</div>
      <div class="content">
        <ul>
          <li><b> 用户ID</b>:{{ userInfo.id }}</li>
          <li><b>登录账号：</b>{{ userInfo.username || "暂无" }}</li>
          <li><b> 手机号归属地：</b>{{ userInfo.mobileLocation || "暂无" }}</li>
          <li>
            <b> 用户身份 </b>
            {{
              ["普通用户", "经纪人", "城市合伙人", "品牌合伙人"][
                userInfo.roleType
              ] || "暂无"
            }}
          </li>
          <b />
        </ul>
        <ul>
          <li><b> 推荐人手机号:</b>{{ userInfo.inviterMobile || "暂无" }}</li>
          <li><b> 推荐人姓名：</b>{{ userInfo.inviterName || "暂无" }}</li>
          <li><b> 注册时间:</b>{{ userInfo.createTime }}</li>
          <li>
            <b>注册渠道：</b>{{ ["", "E-Broker", "车E家"][userInfo.source] || "暂无" }}
          </li>
          <!-- <li>
            <b>注册渠道：</b>{{ ["", "E-Broker", "车E家"][userInfo.source] || "暂无" }}
          </li> -->

        </ul>
        <ul>
          <li>
            <b> 注册地址：</b>
            {{ userInfo.registerCity || "暂无" }}
          </li>
          <li>
            <b> 注销时间：</b>
            {{ $route.query.logoutTime || "暂无" }}
          </li>
        </ul>
      </div>
      <b />
    </div>
    <el-collapse v-model="activeNames2" @change="handleChange">
      <el-collapse-item title="实名认证" name="1">
        <template slot="title">
          <b class="mybig"> 实名认证</b>

          <span class="right-info">已实名</span>
        </template>
        <div class="content">
          <ul>
            <li><b>姓名</b>&nbsp;&nbsp;{{ userInfo.realName }}</li>
            <li><b>银行卡号</b>&nbsp;&nbsp;{{ userInfo.bankCardNo }}</li>
            <li>
              <b>身份证号码</b>&nbsp;&nbsp;{{
                userInfo.idCardNo &&
                  userInfo.idCardNo.replace(/(\d{3})\d*(\d{4})/, "$1****$2")
              }}
            </li>
          </ul>
          <ul>
            <li><b>开户银行</b>&nbsp;&nbsp;{{ userInfo.openingBank }}</li>
            <li>
              <b>证件有效期</b>&nbsp;&nbsp;{{
                userInfo.startExpireDate
              }}-{{ userInfo.endExpireDate }}
            </li>
            <li>
              <b>绑定手机号</b>&nbsp;&nbsp;{{
                userInfo.username &&
                  userInfo.username.replace(/(\d{3})\d*(\d{4})/, "$1****$2")
              }}
            </li>
          </ul>
          <ul>
            <div class="item">
              <div class="img">
                <el-image
                  v-if="userInfo.idCardFront"
                  class="clickImg"
                  style="width: 190px; height: 120px"
                  :src="userInfo.idCardFront"
                  :preview-src-list="[userInfo.idCardFront]"
                />
              </div>

              <p>身份证正面</p>
            </div>
            <div class="item">
              <div class="img">
                <el-image
                  v-if="userInfo.idCardSide"
                  class="clickImg"
                  style="width: 190px; height: 120px"
                  :src="userInfo.idCardSide"
                  :preview-src-list="[userInfo.idCardSide]"
                />
              </div>

              <p>身份证反面</p>
            </div>
          </ul>
        </div>
      </el-collapse-item>
      <el-collapse-item title="基础估价" name="2">
        <template slot="title">
          <b class="mybig"> 基础估价</b>

          <span class="right-info">共0条</span>
        </template>
        <div class="mytable">
          <el-table
            ref="table"
            :key="tableKey"
            v-loading="loading"
            :data="list"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              prop="username"
              :show-overflow-tooltip="true"
              align="center"
              type="index"
              min-width="120px"
            />
            <el-table-column
              label="报告ID"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="报告时间"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | parseTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="品牌车型"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.modelName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="市场车型"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.salesdesc }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上牌时间"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.regdate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="行驶里程(万公里)"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.miles }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="所在城市"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.city }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="基础估价(万元)"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="估价评分"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.price }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item title="买车列表" name="3">
        <template slot="title">
          <b class="mybig"> 买车列表</b>

          <span class="right-info">共0条</span>
        </template>
        <el-table
          ref="table"
          :key="tableKey"
          v-loading="loading"
          :data="list"
          border
          fit
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            prop="username"
            :show-overflow-tooltip="true"
            align="center"
            type="index"
            min-width="120px"
          />
          <el-table-column
            label="车辆ID"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="品牌车型"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="市场车型"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.modelName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上牌时间"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.salesdesc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="行驶里程（万公里）"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.regdate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="所在城市"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.city }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="基础估价(万元)"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上架价格(万元)"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上架时间"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上架状态"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.operation')"
            align="center"
            min-width="150px"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-link class="el-icon-view" @click="view(row)">
                查看详情
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="卖车列表" name="4">
        <template slot="title">

          <b class="mybig"> 卖车列表</b>
          <span class="right-info">共0条</span>
        </template>
        <el-table
          ref="table"
          :key="tableKey"
          v-loading="loading"
          :data="list"
          border
          fit
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            prop="username"
            :show-overflow-tooltip="true"
            align="center"
            type="index"
            min-width="120px"
          />
          <el-table-column
            label="车辆ID"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="品牌车型"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="市场车型"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.modelName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上牌时间"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.salesdesc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="行驶里程（万公里）"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.regdate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="所在城市"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.city }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="基础估价(万元)"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上架价格(万元)"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上架时间"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="上架状态"
            :show-overflow-tooltip="true"
            align="center"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.operation')"
            align="center"
            min-width="150px"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-link class="el-icon-view" @click="view(row)">
                查看详情
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="经纪人认证" name="5">
        <template slot="title">
          <b class="mybig"> 经纪人认证</b>
          <span class="right-info">通过</span>

        </template>
        <div v-if="$route.query.roleType == 1" class="third">
          <!--  1-入驻申请，2-线上考核，3-考核改卷，4-预审通过，5-签约，6-通过，7-冻结，8-拉黑  userInfo-->
          <div class="content" style="padding: 20px 0">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="入驻申请" name="1">
                <template slot="title">
                  &nbsp; &nbsp; &nbsp;入驻申请
                  <!--  0-进行中，1-已提交，2-未通过，3-不符合平台要求，4-通过 -->
                  <span class="right-info">
                    {{
                      ["进行中", "已提交", "未通过", "不符合平台要求", "通过"][
                        erbrokerData.enterApplyState
                      ]
                    }}</span>
                </template>
                <div class="realContent">
                  <p class="realTitle">实名验证</p>
                  <div class="realbox">
                    <ul>
                      <li>姓名 {{ erbrokerData.realName }}</li>
                      <li>性别 {{ erbrokerData.sex === "1" ? "男" : "女" }}</li>
                      <li>名族 {{ erbrokerData.nation }}</li>
                      <li>身份证号码 {{ erbrokerData.idCardNo }}</li>
                      <li>出生日期 {{ erbrokerData.extBirthday }}</li>
                    </ul>
                    <ul>
                      <li>住址 {{ erbrokerData.extAddress }}</li>
                      <li>
                        身份证有效期 {{ erbrokerData.extStartExpireDate }}-{{
                          erbrokerData.extEndExpireDate
                        }}
                      </li>
                    </ul>
                    <ul>
                      <li>
                        身份证正面
                        <el-image
                          v-if="erbrokerData.idCardFront"
                          class="clickImg"
                          style="width: 200px; height: 100px"
                          :preview-src-list="[erbrokerData.idCardFront]"
                          :src="erbrokerData.idCardFront"
                        >
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline" />
                          </div>
                        </el-image>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="realContent">
                  <p class="realTitle">基础资料</p>
                  <div class="realbox">
                    <ul>
                      <li><b>联系信息</b></li>
                    </ul>
                    <ul style="border-bottom: 1px solid #ccc">
                      <li>联系电话 {{ erbrokerData.mobile || "暂无" }}</li>
                      <li>电子邮箱 {{ erbrokerData.contactMail || "暂无" }}</li>
                      <li>
                        联系地址 {{ erbrokerData.contactAddress || "暂无" }}
                      </li>
                    </ul>
                    <ul>
                      <li><b>教育经历</b></li>
                    </ul>
                    <ul>
                      <li>{{ erbrokerData.schoolName }}</li>
                      <li>
                        {{
                          [
                            "初中及以下",
                            "中专/中技",
                            "高中",
                            "大专",
                            "本科",
                            "硕士",
                            "博士",
                          ][erbrokerData.eduType]
                        }}
                      </li>
                      <li>{{ erbrokerData.majorName }}</li>
                      <li>
                        {{ erbrokerData.startTime }}-{{ erbrokerData.endTime }}
                      </li>
                    </ul>
                    <ul style="border-bottom: 1px solid #ccc">
                      <li>
                        学历证书
                        <el-image
                          v-if="erbrokerData.imgUrl"
                          style="width: 150px; height: 100px"
                          :src="erbrokerData.imgUrl"
                          :preview-src-list="[erbrokerData.imgUrl]"
                        >
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline" />
                          </div>
                        </el-image>
                      </li>
                    </ul>
                    <ul>
                      <li><b>工作履历</b></li>
                    </ul>
                    <ul>
                      <li>{{ erbrokerData.companyName }}</li>
                      <li>{{ erbrokerData.positionName }}</li>

                      <!-- <li>2009-155445</li> -->
                    </ul>
                    <ul style="border-bottom: 1px solid #ccc">
                      <li>名片照片</li>
                      <!-- <img class="clickImg" data-img="{{businessCardImgUrl}}" style="width: 100px;" src="{{businessCardImgUrl}}"> -->
                      <el-image
                        v-if="erbrokerData.businessCardImgUrl"
                        style="width: 100px; height: 100px"
                        :src="[erbrokerData.businessCardImgUrl]"
                      >
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline" />
                        </div>
                      </el-image>
                    </ul>
                    <ul>
                      <li>证件号 {{ erbrokerData.no || "暂无" }}</li>
                      <li>
                        准驾车型
                        {{ erbrokerData.driveMotorcycleType || "暂无" }}
                      </li>
                      <li>初次领证日期 {{ erbrokerData.holdCardDate }}</li>
                      <li>
                        有效时间 {{ erbrokerData.licenceStartExpireDate }}-{{
                          erbrokerData.licenceEndExpireDate
                        }}
                      </li>
                    </ul>
                    <ul>
                      <li>
                        驾驶证正面
                        <el-image
                          v-if="erbrokerData.drivingImgUrl"
                          style="width: 100px; height: 100px"
                          :preview-src-list="[erbrokerData.drivingImgUrl]"
                          :src="erbrokerData.drivingImgUrl"
                        >
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline" />
                          </div>
                        </el-image>
                      </li>
                    </ul>
                  </div>
                  <div class="realContent" style="padding-left: 10px">
                    <p class="realTitle">服务范围</p>
                    <div class="realbox">
                      <ul>
                        <li>
                          {{ erbrokerData.provinceName }}
                          {{ erbrokerData.cityName }}
                          {{ erbrokerData.areaName }}
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="realContent" style="padding-left: 10px">
                    <p class="realTitle">风控</p>
                    <div class="realbox">
                      <ul>
                        <li>
                          同盾总分 {{ erbrokerData.finalScore || "暂无" }}
                        </li>
                        <li>
                          同盾建议
                          {{
                            erbrokerData.finalDecision === "erbrokerData" ||
                              "erbrokerData"
                              ? "通过"
                              : "拒绝" || "暂无"
                          }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item title="线上考核" name="2">
                <template slot="title">
                  &nbsp; &nbsp; &nbsp;线上考核
                  <span
                    v-if="
                      erbrokerData.skillExamineState === 3 ||
                        erbrokerData.operateExamineState === 3
                    "
                    class="right-info"
                  >
                    不通过
                  </span>
                  <span
                    v-else-if="
                      erbrokerData.skillExamineState === 1 ||
                        erbrokerData.operateExamineState === 1
                    "
                    class="right-info"
                  >
                    进行中
                  </span>
                  <span
                    v-else-if="
                      erbrokerData.skillExamineState === 4 ||
                        erbrokerData.operateExamineState === 2
                    "
                    class="right-info"
                  >
                    通过
                  </span>
                </template>
                <div class="realContent">
                  <p class="realTitle">理论考核</p>
                  <div class="realbox">
                    <ul>
                      <li>{{ erbrokerData.score || 0 }} 分</li>
                      <li>
                        通过时间 {{ erbrokerData.skillExamineTime || "暂无" }}
                      </li>
                      <li>
                        状态
                        {{
                          ["未验证", "进行中", "已提交", "未通过", "通过"][
                            erbrokerData.skillExamineState
                          ]
                        }}
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="realContent">
                  <p class="realTitle">实操考核</p>
                  <div class="realbox">
                    <ul>
                      <li v-if="erbrokerData.operateExamineTime">
                        通过时间
                        {{ erbrokerData.operateExamineTime | parseTime }}
                      </li>
                      <li>
                        状态
                        {{
                          ["未开始", "待批改", "通过", "不通过"][
                            erbrokerData.operateExamineState
                          ]
                        }}
                      </li>
                      <!--<li>答卷详情 <a href='/pages/brokerManage/check.html?id=121&status=2' name='search' style="width: 100px;text-align: center;">查看答卷 </a></li>-->
                      <!--<li>答卷详情 <a href='/vw/brokerManage/check?id=121&status=2' name='search' style="width: 100px;text-align: center;">查看答卷 </a></li>-->
                      <li>
                        答卷详情
                        <a
                          v-if="erbrokerData.operateExamineState != 0"
                          name="search"
                          style="width: 100px; text-align: center; color: #00f"
                          @click="toChecked"
                        >查看答卷
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item title="签约" name="3">
                <template slot="title">
                  &nbsp; &nbsp; &nbsp;签约
                  <span class="right-info">{{
                    ["未验证", "进行中", "已提交", "未通过", "通过"][
                      erbrokerData.signState
                    ]
                  }}</span>
                </template>
                <div class="realContent">
                  <p class="realTitle">签约</p>
                  <div class="realbox">
                    <ul>
                      <li>
                        状态
                        {{
                          ["未签约", "已签约"][erbrokerData.brokerSignState] ||
                            "暂无"
                        }}
                      </li>
                      <li v-if="erbrokerData.brokerSignTime">
                        签约时间 {{ erbrokerData.brokerSignTime | parseTime }}
                      </li>
                      <li>
                        签约合同
                        <a
                          :href="erbrokerData.downloadUrl"
                          style="color: #00f"
                        >合同签约.pdf</a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div v-if="false" class="realContent">
                  <p class="realTitle">临时税务登记</p>
                  <p />
                  <div class="realbox">
                    <ul>
                      <li>
                        状态
                        {{
                          ["未签约", "已签约"][erbrokerData.registerTaxState] ||
                            "暂无"
                        }}
                      </li>
                      <li v-if="erbrokerData.brokerSignTime">
                        完成注册时间
                        {{ erbrokerData.brokerSignTime | parseTime }}
                      </li>
                    </ul>
                    <ul>
                      <li>临登税务号 {{ erbrokerData.tin || "暂无" }}</li>
                      <li>
                        临登有效期 {{ erbrokerData.startDate }}-{{
                          erbrokerData.endDate
                        }}
                      </li>
                    </ul>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="邀请资料" name="6">
        <template slot="title">
          <b class="mybig">邀请资料</b>
        </template>
        <div v-if="false" class="last">
          <div class="title">邀请资料</div>
          <div class="content">
            <ul>
              <li>
                <b>邀请人数：</b>{{
                  statisticsInviteInfo.directFansNum +
                    statisticsInviteInfo.indirectFansNum
                }}
              </li>
            </ul>
            <ul>
              <li>直接邀请：{{ statisticsInviteInfo.directFansNum || 0 }}</li>
              <li>间接邀请：{{ statisticsInviteInfo.indirectFansNum || 0 }}</li>
            </ul>
            <ul>
              <li>认证经纪人：{{ statisticsInviteInfo.authFansNum || 0 }}</li>
              <li>普通用户：{{ statisticsInviteInfo.normalNum || 0 }}</li>
            </ul>
            <div class="inviteQrcode">
              <!-- inviteQrCode -->
              <div class="QrcodeImg">
                <img
                  v-if="statisticsInviteInfo.inviteQrCode"
                  :src="statisticsInviteInfo.inviteQrCode"
                >
              </div>
              <p>邀请码</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      title="买车列表 - 查看详情 "
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div class="title">订单信息</div>
      <div class="content">
        <ul>
          <li><b> 订单编号:</b>&nbsp;{{ userInfo.id }}</li>
          <li><b> 创建时间:</b>&nbsp;{{ userInfo.username || "暂无" }}</li>
          <li>
            <b> 支付时间:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
          </li>
          <b />
        </ul>
        <ul>
          <li><b> 支付方式:</b>&nbsp;{{ userInfo.id }}</li>
          <li><b> 支付类型:</b>&nbsp;{{ userInfo.username || "暂无" }}</li>
          <li>
            <b> 支付金额:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
          </li>
          <b />
        </ul>
      </div>
      <el-collapse v-model="activeNames3" @change="handleChange">
        <el-collapse-item title="订单进度" name="1">
          <template slot="title">
            <b class="mybig"> 订单进度</b>

            <span class="right-info">待付款</span>
          </template>
          <el-collapse-item title="确认订单" name="2">
            <template slot="title">
              <b class="mybig">&nbsp; 确认订单</b>
            </template>
            <p style="margin-top: 30px">
              <label for="">线下检测订单</label>
              <span class="tips">等待卖家确认</span>
            </p>
            <br>
            <p>
              <label for="">检测报告</label>
              <span class="tips">等待检测是报告</span>
            </p>
            <br>
            <div class="myContent">
              <label for="">签收地址</label>
              <div>
                <span class="tips">卖家姓名:</span><span class="right">sdsd</span><br>
                <span class="tips">卖家手机号:</span><span class="right">sds</span><br>
                <span class="tips">卖家详情地址:</span><span class="right">sdsd</span><br>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>
    <el-dialog
      title="卖车列表- 查看详情"
      :visible.sync="sellCarDialogVisible"
      width="80%"
    >
      <div class="title">车辆上架详情</div>
      <div class="content" style="height: 150px">
        <ul>
          <li><b> 品牌车系:</b>&nbsp;{{ userInfo.id }}</li>
          <li><b> 所在城市:</b>&nbsp;{{ userInfo.username || "暂无" }}</li>
          <li>
            <b> 车辆是否有抵押:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
          </li>
          <b />
          <li><b> 车况是否有以下情况:</b>&nbsp;{{ userInfo.id }}</li>
        </ul>
        <ul>
          <li><b> 车身颜色:</b>&nbsp;{{ userInfo.username || "暂无" }}</li>
          <li>
            <b> 车辆注册日期:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
          </li>
          <li><b> 过户:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}</li>
          <li class="mysplit">
            1、行驶里程修过过公里数<br>
            2、车辆被水泡并进入驾驶室<br>
            3、车辆部分区域发生过灼伤<br>
            4、安全气囊因事故弹出 <br>
            5、A、B、C柱及车辆主体框架大面积修复<br>
            6、车辆发动机/变速箱因事故更换或维修<br>
          </li>
          <b />
        </ul>
        <ul>
          <li><b> 上牌城市:</b>&nbsp;{{ userInfo.username || "暂无" }}</li>
          <li>
            <b> 使用性质:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
          </li>
          <li>
            <b> 行驶里程:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
          </li>
        </ul>
      </div>
      <el-collapse v-model="activeNames4" @change="handleChange">
        <el-collapse-item title="人车认证" name="1">
          <template slot="title">
            <b class="mybig"> 人车认证</b>

            <span class="right-info">待付款</span>
          </template>
          <div class="title" style="font-size: 17px">车辆行驶证</div>
          <div class="content clearfix">
            <div v-for="item in 3" :key="item" class="imgbox">
              <div class="desc">行驶证主页</div>
              <img src="">
            </div>
            <ul>
              <li>号牌号码：XXXX</li>
              <li>号牌号码：XXXX</li>
              <li>号牌号码：XXXX</li>
            </ul>
            <ul>
              <li>号牌号码：XXXX</li>
              <li>号牌号码：XXXX</li>
              <li>号牌号码：XXXX</li>
            </ul>
          </div>
          <div class="title" style="font-size: 17px">机动车登记证书</div>
          <div class="content clearfix">
            <div v-for="item in 3" :key="item" class="imgbox">
              <div class="desc">证书1、2页</div>
              <img src="">
            </div>
          </div>
          <!-- <div class="title" style="font-size: 17px">交强险保单</div>
          <div class="content clearfix">
            <div v-for="item in 3" :key="item" class="imgbox" @click="preview('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')">
              <div class="desc">交强险保单正面</div>
              <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
            </div>
          </div>
          <div class="title" style="font-size: 17px">车辆铭牌</div>
          <div class="content clearfix">
            <div v-for="item in 3" :key="item" class="imgbox">
              <div class="desc">交强险保单正面</div>
              <img src="">
            </div>
          </div> -->
        </el-collapse-item>
        <el-collapse-item title="车辆照片视频" name="2">
          <template slot="title">
            <b class="mybig"> 车辆照片视频</b>

            <span class="right-info">待付款</span>
          </template>
          <div class="title" style="font-size: 17px">车身外观</div>
          <div class="content clearfix">
            <div v-for="item in 14" :key="item" class="imgbox">
              <div class="desc">车辆左前45度角</div>
              <img src="">
            </div>
          </div>
          <div class="title" style="font-size: 17px">中控内饰</div>
          <div class="content clearfix">
            <div v-for="item in 10" :key="item" class="imgbox">
              <div class="desc">中控台</div>
              <img src="">
            </div>
          </div>
          <div class="title" style="font-size: 17px">机舱底盘</div>
          <div class="content clearfix">
            <div v-for="item in 14" :key="item" class="imgbox">
              <div class="desc">后备胎底板</div>
              <img src="">
            </div>
          </div>
          <div class="title" style="font-size: 17px">车辆视频</div>
          <div class="content clearfix">
            <div class="imgbox">
              <div class="desc">车辆视频</div>
              <video src="" />
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="车况描述" name="3">
          <template slot="title">
            <b class="mybig"> 车况描述</b>
            <span class="right-info">未完成</span>
          </template>
          <div class="content">
            <ul>
              <li><b>动力状况:</b></li>
              <li><b>功能状况:</b></li>
              <li><b>外观状况:</b></li>
            </ul>
            <ul>
              <li><b>车辆内饰</b></li>
              <li><b>事故等级</b></li>
            </ul>
            <ul>
              <li><b>车况介绍</b></li>
            </ul>
          </div>
        </el-collapse-item>
        <el-collapse-item title="发布设置" name="4">
          <template slot="title">
            <b class="mybig"> 发布设置</b>
            <span class="right-info">未完成</span>
          </template>
          <div class="content">
            <ul>
              <li><b>发布价格:</b></li>
              <li><b>过户手续是否齐全:</b></li>
              <li><b>车辆是否有抵押:</b></li>
            </ul>
            <ul>
              <li><b>交强险到期时间</b></li>
              <li><b>最快交车时间</b></li>
              <li><b>交车人</b></li>
            </ul>
            <ul>
              <li><b>手机号</b></li>
              <li><b>选择地区：</b></li>
              <li><b>详细地址</b></li>
            </ul>
          </div>
        </el-collapse-item>
        <el-collapse-item title="车况承诺书" name="5">
          <template slot="title">
            <b class="mybig"> 车况承诺书</b>
            <span class="right-info">未同意</span>
          </template>
          <div class="content">
            <ul>
              <li><b>车况承诺书</b> <span style="color:blue">前往查看</span></li>
            </ul>
          </div>
        </el-collapse-item>
        <el-collapse-item title="加V优推" name="5">
          <template slot="title">
            <b class="mybig"> 加V优推</b>
            <span class="right-info">未支付</span>
          </template>
          <div class="content">
            <ul>
              <li><b>维保记录查询</b></li>
              <li><b>出险记录查询</b></li>
              <li><b>支付金额：0.00元</b></li>
              <li><b>用车记录：前往查看</b></li>
            </ul>
          </div>
        </el-collapse-item>
        <el-collapse-item title="发布预览" name="6">
          <template slot="title">
            <b class="mybig"> 发布预览</b>
            <span class="right-info">未上架</span>
          </template>
          <div class="content">
            <ul>
              <li><b>车辆详情</b> <span style="color:blue">前往查看</span></li>
            </ul>
          </div>
        </el-collapse-item>
        <el-collapse-item title="订单详情" name="7">
          <template slot="title">
            <b class="mybig"> 订单详情</b>
            <!-- <span class="right-info">未上架</span> -->
          </template>
          <div class="content">
            <ul>
              <li><b>订单编号</b> <span style="color:blue">前往查看</span></li>
              <li><b>买家下单时间</b> <span style="color:blue">前往查看</span></li>
            </ul>
          </div>
        </el-collapse-item>
        <el-collapse-item title="订单进度" name="8">
          <template slot="title">
            <b class="mybig"> 订单进度</b>

            <span class="right-info">待付款</span>
          </template>
          <el-collapse-item title="确认订单" name="9">
            <template slot="title">
              <b class="mybig">&nbsp; 确认订单</b>
            </template>
            <div style="margin-top: 30px">
              <div class="myContent">
                <label for="">线下检测订单</label>
                <div>
                  <span class="tips">品牌车型:</span><span class="right">sdsd</span><br>
                  <span class="tips">vin:</span><span class="right">sds</span><br>
                  <span class="tips">车牌号:</span><span class="right">sdsd</span><br>
                  <span class="tips">使用性质:</span><span class="right">sdsd</span><br>
                  <span class="tips">初次登记日期:</span><span class="right">sdsd</span><br>
                </div>
                <div style="margin-left:150px">
                  <span class="tips">联系人:</span><span class="right">sdsd</span><br>
                  <span class="tips">手机号:</span><span class="right">sds</span><br>
                  <span class="tips">上门检测地址:</span><span class="right">sdsd</span><br>
                  <span class="tips">目前车辆状态:</span><span class="right">sdsd</span><br>
                  <span class="tips">确认时间:</span><span class="right">sdsd</span><br>
                </div>
              </div>

            </div>
            <br>
            <p>
              <label for="">检测报告</label>
              <span class="tips">等待检测是报告</span>
            </p>
          </el-collapse-item>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['0'],
      statisticsInviteInfo: {},
      loading: false,
      list: [],
      total: 0,
      userInfo: {},
      tableKey: '1',
      erbrokerData: { state: 1 },
      fit: 1,
      activeNames2: ['5'],
      activeNames3: ['0'],
      activeNames4: ['0'],
      dialogVisible: false,
      sellCarDialogVisible: false,
      viewDialogVisible: false
    }
  },
  created() {
    if (this.$route.query.roleType === '3') {
      this.$get(
        `/web/partnerBrand/get/detail?userId=${this.$route.query.id}`
      ).then((res) => {
        if (res.data.code === '0') {
          this.erbrokerData = res.data.data
        }
      })
    }
    if (this.$route.query.roleType === '1') {
      this.$get(
        `/web/broker/get/brokerAuthInfo?userId=${this.$route.query.id}`
      ).then((res) => {
        // console.log(res)
        if (res.data.code === '0') {
          this.erbrokerData = res.data.data
        }
      })
    }
    if (this.$route.query.roleType === '2') {
      this.$get(
        `/web/partnerCity/get/detail?userId=${this.$route.query.id}`
      ).then((res) => {
        // console.log(res)
        if (res.data.code === '0') {
          this.erbrokerData = res.data.data
        }
      })
    }

    this.$get(`/web/userOut/get?userId=${this.$route.query.id}`).then((res) => {
      if (res.data.code === '0') {
        this.userInfo = res.data.data
      }
    })
    console.log(this.$route.query.invite)
    if (Number(this.$route.query.invite) !== 0) {
      this.$get(
        `/web/user/get/statisticsInvite?userId=${this.$route.query.id}`
      ).then((res) => {
        if (res.data.code === '0') {
          this.statisticsInviteInfo = res.data.data
        }
      })
    }
  },
  methods: {
    preview(url) {
      console.log('222')
      this.viewDialogVisible = true
    },
    handleChange() {},
    toMore() {
      this.$router.push({
        path: '/valuation/index',
        query: {
          userNameOrMobile: this.userInfo.mobile
        }
      })
    },
    toChecked() {
      this.$router.push({
        name: 'check',
        query: {
          id: this.$route.query.id,
          status: this.erbrokerData.operateExamineState
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.imgbox {
  // display: flex;
  float: left;
  text-align: center;
  margin-left: 20px;
  .desc {
    font-size: 12px;
  }
  img {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
  }
}
.mysplit {
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: left;
}
.mybig {
  font-size: 20px;
  margin-left: -13px;
}
.myContent {
  display: flex;
  margin-left: 30px;
  label {
    margin-right: 40px;
  }
  .tips {
    width: 100px;
    display: inline-block;
  }
}
p label {
  margin-left: 30px;
  margin-right: 50px;
}
/deep/ .el-image {
  overflow: inherit;
}
.el-collapse-item {
  position: relative;
  .right-info {
    position: absolute;
    right: 40px;
    top: 0px;
  }
}
/deep/ .el-collapse-item__header {
  padding-left: 40px;
}
.realContent {
  padding-left: 40px;
}
.topTips {
  height: 50px;
  line-height: 50px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid #ccc;
}
ul li {
  list-style: none;
}
.container {
  background: #fff;
  border: 1px solid #dfe6ec;
  margin: 20px;
  margin-bottom: 100px;
  /* padding-left: 20px; */
}

.container .title {
  font-size: 20px;
  font-weight: bold;
  /* margin-left: 20px; */
  text-indent: 2rem;
  padding: 10px 0;
  border-bottom: 1px solid #dfe6ec;
}

.container .content {
  border-bottom: 1px solid #dfe6ec;
  position: relative;
}

.container .content ul {
  display: flex;
  text-indent: 2rem;
  padding: 10px 0;
}

.container .content ul li {
  width: 400px;
}
.container .content .item p {
  font-size: 15px;
  text-align: center;
  width: 238px;
}

.container .content .img {
  width: 150px;
  height: 120px;
  /* background: #ccc; */
  margin-right: 20px;
}

.container .content .img img {
  width: 100%;
  height: 100%;
}

// .container .content .item p {
//   font-size: 15px;
//   text-align: center;
//   width: 181px;
// }

.content .QrcodeImg {
  width: 80px;
  height: 80px;
  margin: 8px auto;
  border: 1px solid #ccc;
}

.content .QrcodeImg img {
  width: 100%;
  height: 100%;
}

.content .inviteQrcode {
  text-align: center;
  width: 200px;
  height: 114px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.mytable .title {
  font-size: 20px;
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
}
.mytable .title .more {
  font-size: 15px;
  font-weight: normal;
  color: #ccc;
  margin-right: 20px;
  cursor: pointer;
}
.mytable .title #total {
  color: #000;
  margin-left: 20px;
}
.realTitle {
  // border-bottom: 1px solid #ccc;
  font-weight: 600;
}
</style>
